<template>
	<div>
		<div class="outDiv">
			<scroller lock-x>
				<div>
					<div class="main">
						<div class="topImage">
							<img src="~/static/images/signin_pic_bg.png">
						</div>
						<div class="content">
							<div class="title">升学在线 - 高校管理中心</div>
							<div class="boxloginWrap">
								<div class="login1">
									<xInput :showXx="showxx" :errMsg="errMsgs1" plvalue="请输入登录手机号或院校代码" groupTitle="手机号码或院校代码" type="txt" v-model="vals1"></xInput>
									<xInput :showXx="showxx" :errMsg="errMsgs1" v-model="vals2" plvalue="请输入密码" groupTitle="密码" type="pwd"></xInput>
								</div>
								<div class="btn" @click="suresLogin('one')">登录</div>
							</div>
						</div>
						<div class="footer-top">
							<div class="footer-top-text" style="font-size:0.28rem">使用须知</div>
							<div class="footer-top-text">招生办老师可使用电脑访问 https://university.sx985.com </div>
							<div class="footer-top-text">进行院校动态、院校信息、院校专业设置的操作</div>
							<div class="footer-top-text">招生组老师可直接登录当前系统进行院校答疑的功能操作</div>
						</div>


						<div class="footer-bottom">© 2019 sx985.com, all rights reserved</div>

					</div>
					<div style="width: 100%;height: 10vh;"></div>
				</div>
			</scroller>

		</div>
	</div>
</template>

<script>
	import xInput from '~/components/xInput_2'
	import axios from '~/plugins/axios';
	import ls from 'store2'
	import JSEncrypt from 'jsencrypt/bin/jsencrypt'
	export default {
		components: {
			xInput,
		},
		data() {
			return {
				ssres: '',
				vals1: "",
				vals2: "",
				errMsgs1: "",
				errMsgs2: "",
				showxx: false,
				
			}
		},
		watch: {
			vals2(e) {
				if (e === "") {
					this.errMsgs2 = "请输入您的登录密码"
				} else {
					this.errMsgs2 = ""
				}
				if (this.errMsgs2 === '' & this.errMsgs1 === '' & this.vals1 != '请输入手机号' & e != '请输入登录密码') {
					// this.showColor = 'sure';
				} else {
					// this.showColor = 'cancel';
				}
			}
		},
		mounted() {
			localStorage.clear()
		},
		methods: {
			clear() {
				this.vals1 = "";
			},
			goto(routerName, queryData) {
				this.$router.replace({
					path: routerName,
					query: {
						type: queryData
					}
				});
			},
			suresLogin(type) {
				if (this.vals2 == '') {
					this.$vux.toast.text('未填写登录密码');
					return false;
				}
				this.rsaPassWord = this.vals2;
				this.loginTea(this.vals1, this.rsaPassWord)
			},
			loginTea(phonenum, yzm) {
				this.$vux.loading.show();
				let _this = this;
				axios.post('/university/login', {
					'mobile': phonenum,
					'password': yzm,
				}).then(res => {
					let token = res.access_token;
					ls.set('tokens', token)
					setTimeout(function() {						
						_this.commonJs.gosto('teaindex');
					}, 50)
				}).catch(() => {
					this.$vux.toast.text('登录失败，请重新登录');
				}).finally(() => {
					this.$vux.loading.hide();
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.outDiv {
		width: 100%;
		height: 100vh;
		background: #FFF;
		.main {
			position: relative;
			.topImage {
				position: relative;
				width: 100%;
				z-index: 1000;

				img {
					width: 100%;
					height: 4.78rem;
				}
			}
			.content {
				position: relative;
				top: -0.54rem;
				width: 6.86rem;
				height: 7.36rem;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0 2px 10px 0 rgba(153, 153, 153, 0.2);
				border-radius: 0.2rem;
				margin: 0 0.32rem;
				padding: 0.64rem 0.32rem 0;
				.title {
					font-size: 0.4rem;
					font-weight: bold;
					color: #222;
					text-align: center;
				}
				.boxloginWrap {
					width: 100%;
					height: auto;
					margin-top: 0.4rem;
					box-sizing: border-box;
					.login1 {
						width: 100%;
						height: auto;
						box-sizing: border-box;
						margin-bottom: 0.64rem;
					}
					.btn {
						height: 0.88rem;
						line-height: 0.88rem;
						width: 100%;
						border-radius: 0.44rem;
						background: #409EFF;
						color: #FFF;
						text-align: center;
						font-weight: bold;
					}
				}
			}
			.footer-bottom {
				font-size: 0.22rem;
				color: #999;
				margin-top: 0.1rem;
				text-align: center;
			}
			.footer-top-text {
				color: #999;
				font-size: 0.26rem;
				margin: 0 0.32rem;
				text-align: left;
				line-height: 0.42rem;
			}

			.footer-top {
				margin-bottom: 0.20rem;
			}
		}
	}
</style>
